<route lang="json5">
{
  style: {
    navigationBarTitleText: '当前余额',
  },
}
</route>
<template>
  <view class="min-h-screen bg-gray-50 pb-20">
    <view class="bg-white p-4 sticky top-0 z-10 shadow-sm">
      <view class="mt-4 flex justify-between items-baseline">
        <view>
          <view class="text-sm text-gray-500 mb-2">当前余额</view>
          <view>
            <text class="text-xs mr-1">¥</text>
            <text class="text-2xl font-bold text-[#ff6a00]">{{ currentBalance }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- item List -->
    <view class="p-4">
      <wd-status-tip image="content" v-if="list.length === 0" tip="暂无交易记录" />
      <view v-else>
        <view class="mb-6">
          <view class="space-y-3">
            <view
              v-for="(item, index) in list"
              :key="index"
              class="bg-white rounded-lg shadow-sm p-4"
              @click="showitemDetail(item)"
            >
              <view class="flex justify-between items-start">
                <view>
                  <view class="font-medium text-gray-800">{{ item.detailed }}</view>
                  <view class="text-xs text-gray-500 mt-1">{{ item.remark }}</view>
                  <view class="text-xs text-gray-500 mt-1">{{ item.createTime }}</view>
                </view>
                <view class="text-right">
                  <view
                    class="font-bold"
                    :class="item.inOut == 1 ? 'text-green-500' : 'text-red-500'"
                  >
                    {{ item.inOut == 1 ? '+' : '' }}¥{{ item.amount }}
                  </view>
                  <view class="text-xs text-gray-500 mt-1">余额:¥{{ item.balance }}</view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import { CreditCard } from 'lucide-vue-next'
import { http } from '@/utils/http'

const currentBalance = ref(0)

const queryParams = ref({
  pageNum: 1,
  pageSize: 10,
})

const list = ref([])
const total = ref(0)

const getData = async () => {
  const res = await http.get('/api/user/transferRecord', { type: 0, ...queryParams.value })
  if (res.code == 200) {
    if (queryParams.value.pageNum == 1) {
      list.value = res.data.records
    } else {
      list.value = [...list.value, ...res.data.records]
    }
    total.value = res.data.total
  }

  let resp = await http.get('/api/user/my')
  if (resp.code == 200) {
    console.log('resp', resp)
    currentBalance.value = resp.data.balanceQuota
  }
}

onLoad(() => {
  getData()
})

onReachBottom(() => {
  if (list.value.length < total.value) {
    queryParams.value.pageNum++
    getData()
  } else {
    uni.showToast({
      title: '没有更多了',
      icon: 'none',
    })
  }
})
</script>
